@media (min-width:"769px") {
  .commit-title {
    text-align: center;

    .c-name {
      font-size: 26px;
    }

    .e-name {
      font-size: 16px;
    }
  }

  .header {
    height: 80px;
    transition: all .3s ease-in-out;

    &.active {
      height: 60px;
      background-color: rgba(255, 255, 255, .9);
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    }

    .header-c-m {
      display: none;
    }

    .banenr {
      margin-bottom: 90px;
    }

    .header-c {
      width: 1200px;
      height: 100%;
      margin: 0 auto;

      .header-nav {
        padding: 0 60px;
        height: 100%;

        &::before {
          display: inline-block;
          content: '';
          height: 100%;
          font-size: 0;
          vertical-align: middle;
        }

        .logo {
          display: inline-block;
          vertical-align: middle;

          img {
            display: block;
          }

          .logo-num {
            padding: 7px 0 0 65px;
          }
        }

        .nav-list {
          float: right;
          height: 100%;

          &::after {
            content: '';
            display: inline-block;
            font-size: 0;
            vertical-align: middle;
            height: 100%;
          }

          .nav-item {
            display: inline-block;
            margin-left: 65px;
            transition: all linear 0.1s;
            vertical-align: middle;

            &:hover {
              transform: scale(1.03);

              a {
                color: #1d1d1d;
              }

              a::after {
                opacity: 1;
              }


            }

            a {
              display: block;
              height: 100%;
              padding: 10px;
              color: #666666;
              letter-spacing: 0.05em;

              &::after {
                content: "";
                display: block;
                width: 75%;
                height: 1px;
                background-color: #b9ab77;
                margin-left: 20%;
                margin-top: 3px;
                opacity: 0;
              }
            }

            &.active {
              transform: scale(1.03);

              a {
                color: #1d1d1d;

                &::after {
                  content: "";
                  display: block;
                  width: 75%;
                  height: 1px;
                  background-color: #b9ab77;
                  margin-left: 20%;
                  margin-top: 3px;
                  opacity: 1;
                }
              }
            }
          }
        }
      }
    }
  }

  .footer-c {
    height: 100px;
    width: 1200px;
    margin: 0 auto;

    .record {
      float: left;

      p {
        &:nth-child(1) {
          margin: 35px 0 13px;
        }

        &:nth-child(2) {
          margin: 13px 0 18px;
        }
      }
    }

    .join {
      float: right;
      line-height: 100px;

      .join-item {
        margin-left: 58px;
      }
    }

  }
}

@media (max-width:768px) {
  .commit-title {
    .c-name {
      font-size: 20px;
    }

    .e-name {
      font-size: 13px;
    }

    margin: 60px 0 35px;
  }

  .header {
    height: 80px;
    background-color: rgb(255, 255, 255);

    transition: all 0.3s ease-in-out;

    &.active {
      height: 40px;
      background-color: rgba(255, 255, 255, .4);
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    }

    &.touchactive {
      height: 40px;
      background-color: rgba(255, 255, 255, .4);
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    }

    .header-c {
      height: 100%;
      display: none;
    }

    .header-c-m {
      height: 100%;
      display: block;

      .header-nav {
        padding: 0 15px;
        text-align: justify;
        height: 100%;

        .header-vertical {
          display: inline-block;
          content: '';
          height: 100%;
          font-size: 0;
          vertical-align: middle;
        }

        &::after {
          display: inline-block;
          width: 100%;
          content: '';
          font-size: 0;
        }

        .logo {
          display: inline-block;
          vertical-align: middle;

          // width: auto;
          img {
            &:first-child {

              width: 89px;
            }

            &:nth-child(2) {
              width: 24px;
            }

            display: block;
          }

          .logo-num {
            padding: 4px 0 0 32px;
          }
        }

        .nav-list {
          display: none;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          text-align: center;
          z-index: 2;
          .nav-item {
            padding: 25px;
            background-color: rgba(255, 255, 255, 0.3);
            &.active>a {
              color: #b9ab77;
            }
            &:first-child {
              padding-top: 120px;
            }

            &:last-child {
              padding-bottom: 1000px;
            }

            a {
              display: block;
              width: 100%;
              color: #1d1d1d;
            }

          }
        }

        .hamburger {

          display: inline-block;
          height: 40px;
          transition: all 0.3s linear;
          width: 40px;
          vertical-align: middle;
          margin-right: 15px;
          .line {
            display: block;
            width: 20px;
            height: 2px;
            border-radius: 2px;
            margin: 5px auto 0;
            background-color: #3D3D3D;
            transition: all 0.3s linear;
          }

          .line:first-child {
            margin-top: 13px;
          }
        }

        .hamburger.active {
          position: relative;
          transition-delay: 0.6s;
          transform: rotate(45deg);
          z-index: 3;

          .line {
            display: block;
            background-color: #1d1d1d;
          }

          .line:nth-child(2) {
            width: 0px;
          }

          .line:first-child {
            transform: translateY(7px);
            transition-delay: 0.3s;
          }

          .line:nth-child(3) {
            transform: translateY(-7px) rotate(90deg);
            transition-delay: 0.3s;
          }
        }

      }
    }
  }

  .footer-c {
    height: 80px;
    padding: 0 5px;
    text-align: center;
    line-height: 2;

    .record {
      margin-top: 20px;
    }

    .join {
      display: inline-block;

      .join-item {
        margin-left: 10px;
      }
    }

    .toup {
      right: 15px;
      bottom: 5px;

      a {
        width: 35px;
        height: 35px;
      }
    }
  }
}